<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

    <link rel="stylesheet" href="css/login_style.css">
</head>

<body>
<div class="floating-div" id="myAlert"></div>

<div class="login-container">
    <h2>登录</h2>
    <form id="loginForm">
        <label for="phone">手机号:</label>
        <input type="text" id="phone" name="name" required prefix="请输入注册的手机号"/>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required prefix="请输入密码"/>

        <button type="submit">登录</button>
    </form>
</div>
</body>

</html>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
    $(document).ready(function () {

        // 这里自己封装一个方法，避免太多重复的代码。这个方法就是模拟一个弹出的提示
        function ZHY(object, color, message) {
            object.css('background-color', color);
            object.text(message);
            object.show();
            setTimeout(function () {
                object.hide();
            }, 3000);
        }

        // 阻止表单提交，通过Ajax提交
        $('#loginForm').submit(function (e) {
            e.preventDefault();

            let myAlert = $('#myAlert');    // 获取自己模拟的弹出层

            // 通过正则表达式对输入的数据进行合法性验证

            let phone = $('#phone').val();
            let password = $('#password').val();

            let phonePattern = /^1[3-9]\d{9}$/;
            let passwordPattern = /^[a-zA-Z0-9\S]{6,16}$/;

            if (!phonePattern.test(phone)) {
                ZHY(myAlert, '#fdbcb4', '手机号码格式不正确');
                return;
            }

            if (!passwordPattern.test(password)) {
                ZHY(myAlert, '#fdbcb4', '用户密码格式不合法');
                return;
            }

            $.ajax({
                type: 'POST',
                url: '/userLogin',
                data: {
                    "phone": phone,
                    "password": password
                },
                success: function (data) {
                    if (data.status === 1) {
                        ZHY(myAlert, '#fdbcb4', data.message);
                    } else if (data.status === 2) {
                        ZHY(myAlert, '#d0f0c0', data.message);
                        setTimeout(function () {
                            loginAfter();
                        }, 1000);
                    }
                },
                error: function () {
                    ZHY(myAlert, '#fdbcb4', data.message);
                }
            });
        });

        //登录后发送请求后台处理跳转页面
        function loginAfter() {

            let phone =$('#phone').val();

            $.ajax({
                type: 'POST',
                url: '/getUserLog',
                data: {
                    "phone" : phone
                },
                success: function (data) {
                    if (data.status === 1) {
                        ZHY(myAlert, '#fdbcb4', data.message);
                    }
                },
                error: function () {
                    ZHY(myAlert, '#fdbcb4', data.message);
                }
            });
        }
    });
</script>
